<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>忘记密码 - AI汇报助理</title>
    <div th:replace="common/link::header"></div>
    <link rel="stylesheet" th:href="@{/static/layuiadmin/style/login.css}" media="all">
    <style>
        .layadmin-user-login-codeimg {
            height: 38px;
            cursor: pointer;
        }
        .captcha-container {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        .captcha-input {
            flex: 1;
        }
        .password-tip {
            color: #909399;
            font-size: 12px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div class="layadmin-user-login layadmin-user-display-show">
    <div class="layadmin-user-login-main">
        <div class="layadmin-user-login-box layadmin-user-login-header">
            <h2>忘记密码</h2>
            <p>通过邮箱验证重置您的密码</p>
        </div>
        
        <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-username"></label>
                <input type="text" name="userName" id="userName" lay-verify="required" placeholder="请输入用户名" class="layui-input">
            </div>
            
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-email"></label>
                <input type="email" name="email" id="email" lay-verify="required|email" placeholder="请输入注册邮箱" class="layui-input">
            </div>
            
            <div class="layui-form-item">
                <div class="captcha-container">
                    <div class="layui-col-xs7">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-vercode"></label>
                        <input type="text" name="code" id="code" lay-verify="required" placeholder="请输入邮箱验证码" class="layui-input">
                    </div>
                    <div class="layui-col-xs5">
                        <div style="margin-left: 10px;">
                            <button type="button" class="layui-btn layui-btn-primary" id="sendCodeBtn">获取验证码</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-password"></label>
                <input type="password" name="newPassword" id="newPassword" lay-verify="required|pass" placeholder="请输入新密码" class="layui-input">
            </div>
            
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-password"></label>
                <input type="password" name="confirmPassword" id="confirmPassword" lay-verify="required|repass" placeholder="请确认新密码" class="layui-input">
            </div>
            
            <div class="password-tip">
                密码长度不小于8位，请确保两次输入的密码一致
            </div>
            
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="reset-password" style="background: #AA3130">确认重置</button>
            </div>
            
            <div class="layui-form-item">
                <a href="/loginPage" class="layui-btn layui-btn-primary layui-btn-fluid">返回登录</a>
            </div>
        </div>
    </div>

    <div class="layui-trans layadmin-user-login-footer">
    </div>
</div>

<div th:replace="common/script::footer"></div>
<script th:inline="javascript">
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'layer'], function(){
        let $ = layui.$,
            form = layui.form,
            layer = layui.layer;

        // 自定义验证规则
        form.verify({
            pass: [
                /^[\S]{8,16}$/
                ,'密码必须8到16位，且不能出现空格'
            ],
            repass: function(value) {
                if(value !== $('#newPassword').val()) {
                    return '两次输入的密码不一致';
                }
            }
        });

        // 发送验证码
        $('#sendCodeBtn').on('click', function(e) {
            e.preventDefault();
            let email = $('#email').val();
            let userName = $('#userName').val();
            
            if(!userName) {
                layer.msg('请输入用户名');
                return;
            }
            
            if(!email) {
                layer.msg('请输入邮箱地址');
                return;
            }

            let btn = $(this);
            btn.addClass('layui-btn-disabled').attr('disabled', true);
            
            $.ajax({
                type: 'GET',
                url: ctx + '/system/sysUser/send',
                data: {
                    toEmail: email
                },
                dataType: 'json',
                success: function(result) {
                    if(result.code === 200) {
                        layer.msg('验证码已发送到邮箱');
                        let countdown = 60;
                        let timer = setInterval(function() {
                            countdown--;
                            btn.text(countdown + '秒后重试');
                            if(countdown <= 0) {
                                clearInterval(timer);
                                btn.removeClass('layui-btn-disabled').attr('disabled', false).text('获取验证码');
                            }
                        }, 1000);
                    } else {
                        layer.msg(result.message || '发送失败');
                        btn.removeClass('layui-btn-disabled').attr('disabled', false);
                    }
                },
                error: function() {
                    layer.msg('发送失败，请稍后重试');
                    btn.removeClass('layui-btn-disabled').attr('disabled', false);
                }
            });
        });

        // 提交重置密码
        form.on('submit(reset-password)', function(data) {
            let loading = layer.load(0, {
                shade: false,
                time: 2 * 1000
            });
            
            $.ajax({
                type: 'GET',
                url: ctx + '/system/sysUser/forgotPassword',
                data: {
                    userName: data.field.userName,
                    email: data.field.email,
                    code: data.field.code,
                    password: data.field.newPassword
                },
                dataType: 'json',
                success: function(result) {
                    layer.close(loading);
                    if(result.success) {
                        layer.msg('密码重置成功，正在跳转...', {
                            icon: 1,
                            time: 1000
                        }, function() {
                            window.location.href = '/loginPage';
                        });
                    } else {
                        layer.msg(result.message || '重置密码失败');
                    }
                },
                error: function() {
                    layer.close(loading);
                    layer.msg('重置密码失败，请稍后重试');
                }
            });
            
            return false;
        });
    });
</script>
</body>
</html>